<script setup>
import { ref, watch } from "vue";
import { ArrowLeft, ArrowRight, Finished } from "@element-plus/icons-vue";

const Class = ref([
  {
    "id": 1,
    "memberCount": 40,
    "learnedtime": 100,
    "taskCount": 30,
    "activity": {
      "act1": 9, // 非常活跃
      "act2": 28, // 相对活跃
      "act3": 2, // 不太活跃
      "act4": 1 // 疑似废弃账号
    },
    "overview": [60, 90, 85, 75],
    // overview的四个数据分别代表成绩、活跃度、完成任务数、加入的非班级课程的评分，满分为100
    "suggestion": {
      "activity": "该班级学生总体活跃度较高，但有少数学生活跃度较低，建议关注并提供更多支持。",
      "overview": "该班级的综合指标显示学生整体表现尚可，但还有提升的空间，可以通过更有针对性的教学方法和个性化辅导来提高学生的综合水平。"
    }
  },
  {
    "id": 2,
    "memberCount": 120,
    "learnedtime": 150,
    "taskCount": 50,
    "activity": {
      "act1": 25,
      "act2": 80,
      "act3": 10,
      "act4": 5
    },
    "overview": [80, 85, 70, 90],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，表现良好。",
      "overview": "该班级学生综合指标较为平衡，但部分学生在某些方面仍有提升空间。"
    }
  },
  {
    "id": 3,
    "memberCount": 200,
    "learnedtime": 180,
    "taskCount": 70,
    "activity": {
      "act1": 40,
      "act2": 140,
      "act3": 15,
      "act4": 5
    },
    "overview": [85, 90, 75, 80],
    "suggestion": {
      "activity": "该班级学生整体活跃度非常高，表现优秀。",
      "overview": "该班级学生在综合指标上表现良好，但仍可进一步提高。"
    }
  },
  {
    "id": 4,
    "memberCount": 80,
    "learnedtime": 120,
    "taskCount": 45,
    "activity": {
      "act1": 10,
      "act2": 60,
      "act3": 5,
      "act4": 5
    },
    "overview": [70, 70, 65, 80],
    "suggestion": {
      "activity": "该班级学生总体活跃度一般，需进一步激发学生的学习积极性。",
      "overview": "该班级学生在综合指标上有一定差距，建议针对不同水平的学生提供个性化辅导。"
    }
  },
  {
    "id": 5,
    "memberCount": 300,
    "learnedtime": 200,
    "taskCount": 80,
    "activity": {
      "act1": 60,
      "act2": 200,
      "act3": 20,
      "act4": 20
    },
    "overview": [90, 95, 85, 85],
    "suggestion": {
      "activity": "该班级学生整体活跃度极高，表现优异。",
      "overview": "该班级学生在综合指标上表现出色，是一个成功的学习团队。"
    }
  },
  {
    "id": 6,
    "memberCount": 100,
    "learnedtime": 160,
    "taskCount": 55,
    "activity": {
      "act1": 30,
      "act2": 90,
      "act3": 10,
      "act4": 5
    },
    "overview": [75, 80, 70, 85],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，但有少数学生活跃度较低，建议关注并提供更多支持。",
      "overview": "该班级学生在综合指标上有一定水平，但还有提升空间，可以通过更有针对性的教学方法和个性化辅导来提高学生的综合水平。"
    }
  },
  {
    "id": 7,
    "memberCount": 250,
    "learnedtime": 190,
    "taskCount": 75,
    "activity": {
      "act1": 50,
      "act2": 170,
      "act3": 15,
      "act4": 15
    },
    "overview": [85, 90, 80, 80],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，表现良好。",
      "overview": "该班级学生在综合指标上表现出色，但仍有一些学生的表现有待提高。"
    }
  },
  {
    "id": 8,
    "memberCount": 60,
    "learnedtime": 130,
    "taskCount": 40,
    "activity": {
      "act1": 15,
      "act2": 50,
      "act3": 5,
      "act4": 5
    },
    "overview": [65, 75, 60, 70],
    "suggestion": {
      "activity": "该班级学生整体活跃度一般，需进一步激发学生的学习积极性。",
      "overview": "该班级学生在综合指标上有一定差距，建议提供更多个性化的学习辅导。"
    }
  },
  {
    "id": 9,
    "memberCount": 150,
    "learnedtime": 170,
    "taskCount": 60,
    "activity": {
      "act1": 35,
      "act2": 120,
      "act3": 10,
      "act4": 5
    },
    "overview": [80, 85, 75, 85],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，但有一部分学生活跃度较低，建议关注并提供更多支持。",
      "overview": "该班级学生在综合指标上表现较好，但仍有提升的空间，可以通过更有针对性的教学方法和个性化辅导来提高学生的综合水平。"
    }
  },
  {
    "id": 10,
    "memberCount": 180,
    "learnedtime": 175,
    "taskCount": 65,
    "activity": {
      "act1": 40,
      "act2": 130,
      "act3": 15,
      "act4": 5
    },
    "overview": [85, 90, 80, 85],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，表现良好。",
      "overview": "该班级学生在综合指标上表现出色，但仍有一些学生的表现有待提高。"
    }
  },
  {
    "id": 11,
    "memberCount": 70,
    "learnedtime": 125,
    "taskCount": 42,
    "activity": {
      "act1": 12,
      "act2": 55,
      "act3": 5,
      "act4": 5
    },
    "overview": [70, 75, 65, 75],
    "suggestion": {
      "activity": "该班级学生整体活跃度一般，需进一步激发学生的学习积极性。",
      "overview": "该班级学生在综合指标上有一定差距，建议提供更多个性化的学习辅导。"
    }
  },
  {
    "id": 12,
    "memberCount": 260,
    "learnedtime": 195,
    "taskCount": 78,
    "activity": {
      "act1": 55,
      "act2": 180,
      "act3": 18,
      "act4": 7
    },
    "overview": [87, 92, 82, 82],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，表现良好。",
      "overview": "该班级学生在综合指标上表现出色，但仍有一些学生的表现有待提高。"
    }
  },
  {
    "id": 13,
    "memberCount": 90,
    "learnedtime": 135,
    "taskCount": 48,
    "activity": {
      "act1": 18,
      "act2": 65,
      "act3": 7,
      "act4": 5
    },
    "overview": [72, 78, 68, 78],
    "suggestion": {
      "activity": "该班级学生整体活跃度一般，需进一步激发学生的学习积极性。",
      "overview": "该班级学生在综合指标上有一定差距，建议提供更多个性化的学习辅导。"
    }
  },
  {
    "id": 14,
    "memberCount": 280,
    "learnedtime": 200,
    "taskCount": 82,
    "activity": {
      "act1": 60,
      "act2": 190,
      "act3": 20,
      "act4": 10
    },
    "overview": [88, 93, 85, 85],
    "suggestion": {
      "activity": "该班级学生整体活跃度极高，表现优异。",
      "overview": "该班级学生在综合指标上表现出色，是一个成功的学习团队。"
    }
  },
  {
    "id": 15,
    "memberCount": 50,
    "learnedtime": 110,
    "taskCount": 38,
    "activity": {
      "act1": 8,
      "act2": 45,
      "act3": 5,
      "act4": 5
    },
    "overview": [68, 70, 62, 72],
    "suggestion": {
      "activity": "该班级学生整体活跃度一般，需进一步激发学生的学习积极性。",
      "overview": "该班级学生在综合指标上有一定差距，建议提供更多个性化的学习辅导。"
    }
  },
  {
    "id": 16,
    "memberCount": 270,
    "learnedtime": 197,
    "taskCount": 80,
    "activity": {
      "act1": 58,
      "act2": 185,
      "act3": 20,
      "act4": 7
    },
    "overview": [87, 91, 84, 83],
    "suggestion": {
      "activity": "该班级学生整体活跃度较高，表现良好。",
      "overview": "该班级学生在综合指标上表现出色，但仍有一些学生的表现有待提高。"
    }
  },
])

//-----------------for chart dependences---------------
    import { use } from 'echarts/core'
    import { PieChart } from 'echarts/charts'
    import { TooltipComponent, LegendComponent } from 'echarts/components'
    import { CanvasRenderer } from 'echarts/renderers'
    use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer])

    import VChart from 'vue-echarts'

    const StuAccountActivityoption = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center',
        textStyle: { color: '#000000'}
    },
    series: [
        {
        name: '学生活跃度',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
                color: 'gray'
            }
        },
        labelLine: {
            show: false,
        },
        data: [
            { value: 8, name: '高活跃度学生' },
            { value: 18, name: '中活跃度' },
            { value: 12, name: '低活跃度' },
            { value: 2, name: '疑似废弃账号' },
        ]
        }
    ]
    });

    import { RadarChart } from 'echarts/charts'
    import { TitleComponent } from 'echarts/components'

    use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer])

    const ClassOverviewoption = ref({
        title: {
        },
        legend: {
        },
        radar: {
            // shape: 'circle',
            indicator: [
            { name: '学习成绩', max: 100 },
            { name: '学生活跃度', max: 100 },
            { name: '学生完课率', max: 100 },
            { name: '非班级课程数量', max: 100 },
            
            ]
        },
        series: [
            {
            type: 'radar',
            data: [
                {
                value: [60, 90, 85, 75],
                },
            ]
            }
        ]
    })

//-----------------for switch button-------------------
const classIndex = ref(0); // 初始 ClassId

const currentClass = ref(Class.value[classIndex.value]);

const fetchPreviousClass = () => {
  if (classIndex.value > 0) {
    classIndex.value--; 
    currentClass.value = Class.value[classIndex.value];
  }else{
    classIndex.value = Class.value.length - 1;
    currentClass.value = Class.value[classIndex.value];
  }
};

const fetchNextClass = () => {
  if(classIndex.value < Class.value.length - 1){
    classIndex.value++; // 增加 ClassId
    currentClass.value = Class.value[classIndex.value];
  }else{
    classIndex.value = 0;
    currentClass.value = Class.value[classIndex.value];
  }
  
};

watch(currentClass, (newValue) =>{
  StuAccountActivityoption.value.series[0].data[0].value = newValue.activity.act1;
  StuAccountActivityoption.value.series[0].data[1].value = newValue.activity.act2;
  StuAccountActivityoption.value.series[0].data[2].value = newValue.activity.act3;
  StuAccountActivityoption.value.series[0].data[3].value = newValue.activity.act4;
  ClassOverviewoption.value.series[0].data[0] = newValue.overview;
});

//----------------------------------------------
</script>

<template>
  <div class="Lecture">
    <div class="lecture_title">
      <h2>班级情况分析</h2>
    </div>
    <div class="section">
      <div class="left_section">
        <div class="Lecture_info">
          <el-descriptions style="margin-top: 5%;" :column="1" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                班级ID 
                </div>
              </template>
                  <p>{{ currentClass.id }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  班级人数
                </div>
              </template>
                  <p>{{ currentClass.memberCount }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  学习时长
                </div>
              </template>
                  <p>{{ currentClass.learnedtime }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  完成任务数
                </div>
              </template>
                  <p>{{ currentClass.taskCount }}</p>
            </el-descriptions-item>
          </el-descriptions>          
        </div>
        <div class="Lecture_suggestion">
          <h3>建议&评价：</h3>
          <el-descriptions style="margin-top: 20%;" :column="1" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                活跃度 
                </div>
              </template>
                  <p>{{ currentClass.suggestion.activity }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  综合指标
                </div>
              </template>
                  <p>{{ currentClass.suggestion.overview }}</p>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="right_section">
        <div class="Lecture_charts">
          <h3>班级成员活跃度</h3>
          <v-chart class="stu_act_chart" :option="StuAccountActivityoption"></v-chart>
        </div>
        <div class="Lecture_charts">
          <h3>班级画像</h3>
          <v-chart class="class_overview_chart" :option="ClassOverviewoption"></v-chart>
        </div>
      </div>
    </div>
    <div class="Lecture_switch">
      <el-button-group class="Lecture_switch_button">
        <el-button type="primary" @click="fetchPreviousClass" :icon="ArrowLeft"
          >上一个</el-button
        >
        <el-button type="primary" @click="fetchNextClass"
          >下一个<el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<style scoped>
.Lecture {
  padding: 10px;
  display: inline-flex;
  flex-wrap: wrap;
  height: 690px;
  width: 50%;
  border: 1px gainsboro solid;
  border-radius: 10px;
  background-color: white;
  color: black;
}

.Lecture h2 {
  margin: 0;
  margin-right: 60px;
  display: inline-flex;
  text-align: center;
}

.Lecture h3 {
  margin: 5px;
}

.lecture_title {
  display: flex;
  height: 4%;
  width: 100%;
  margin-bottom: 1%;
  box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}

.Lecture h1 {
  text-align: center;
  margin: 2%;
}

.section {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  height: 86%;
}

.left_section {
  width: 42%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  margin-right: 1%;
}

.right_section {
  width: 58%;
  height: 98%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.Lecture_info {
  width: 100%;
  height: 40%;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 0.05%;
}

.Lecture_info li {
  margin-top: 0px;
  padding: 15px;
}

.Lecture_suggestion {
  width: 100%;
  height: 48%;
  border-radius: 10px;
  box-sizing: border-box;
}

.Lecture_suggestion h1 {
  margin: 5px;
}

.Lecture_suggestion li {
  padding: 7px;
}

.Lecture_suggestion p {
  margin: 0px;
}

.Lecture_switch {
  margin: 0;
  height: 10%;
  width: 100%;
  border-radius: 10px;
}

.Lecture_switch_button {
  margin-top: 3%;
  margin-left: 35%;
}

.Lecture_charts {
  display: inline-block;
  height: 49.75%;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 1%;
}

.Lecture_charts {
  display: inline-block;
  height: 49.75%;
  width: 100%;
  margin-bottom: 1%;
}

.stu_act_chart{
    display: flex;
    height: 100%;
    width: 100%;
}

.class_overview_chart{
    display: flex;
    height: 100%;
    width: 100%;
}
</style>
